<template>
	<div>
		<div class="container">
			<div class="nav">
				<router-link to="/layout/gonglue">
					<img src="../../assets/smallIcon/return.png" alt="">
				</router-link>	
				<Search />
			</div>
			<div class="mid"></div>
			<div class="city">
				<ul>
					<li>
						<router-link to="/layout/fenlei-city">城市</router-link>
					</li>
					<li>
						<router-link to="/layout/fenlei-fenlei">分类</router-link>
					</li>
					<li>
						<router-link to="/layout/fenlei-season">季节</router-link>
					</li>
				</ul>
				<div class="heng"></div>	
			</div>
			<div class="wenzi">
				<p>亚洲</p>
			</div>
			<div class="country">
				<div class="country_box">
					<img src="../../assets/landscape/China_GDCS.png"  alt="">
				    <img src="../../assets/landscape/Thailand_GDCS.png"  alt="">
				    <router-link to="/layout/japan">
				    	<img src="../../assets/landscape/Japan_GDCS.png"  alt="">
				    </router-link>
				    <img src="../../assets/landscape/Cambodia_GDCS.png"  alt="">
				    <img src="../../assets/landscape/Thailand_GDCS.png" alt="">
				    <img src="../../assets/landscape/Singapore_GDCS.png" alt="">
				    <img src="../../assets/landscape/Korea_GDCS.png"  alt="">
				    <img src="../../assets/landscape/Malaysia_GDCS.png"  alt="">
				    <img src="../../assets/landscape/Macau_GDCS.png"  alt="">
				    <img src="../../assets/landscape/Taiwan_GDCS.png" alt="">
				   <img src="../../assets/landscape/SriLanka_GDCS.png" alt="">
				   <img src="../../assets/landscape/Vietnam_GDCS.png"  alt="">
				</div>
			</div>
			<div class="ouzhou">
				<p>欧洲</p>
			</div>
			<div class="country">
				<div class="country_box">
				    <img src="../../assets/landscape/Korea_GDCS.png"  alt="">
				    <img src="../../assets/landscape/Malaysia_GDCS.png"  alt="">
				    <img src="../../assets/landscape/Macau_GDCS.png"  alt="">
				    <img src="../../assets/landscape/Taiwan_GDCS.png" alt="">
				    <img src="../../assets/landscape/SriLanka_GDCS.png" alt="">
				    <img src="../../assets/landscape/Vietnam_GDCS.png"  alt=""> 
				    <img src="../../assets/landscape/Japan_GDCS.png"  alt="">
				    <img src="../../assets/landscape/Cambodia_GDCS.png"  alt="">
				    <img src="../../assets/landscape/Thailand_GDCS.png" alt="">
				    <img src="../../assets/landscape/Singapore_GDCS.png" alt="">
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import Search from '../../components/search.vue'
export default{
	name:"fCity",
	data(){
		return{

		}
	},
	components:{
			Search
		}
}	

</script>
<style scoped lang="less">
.container{
	.nav{
		width:100%;
		height:94 / 50rem;
		background-color: #7DD19C;
		overflow: hidden;
		position:fixed;
	    top:0;
	    left: 0;
	    right: 0;
		img{
			width: 22 /50rem;
			height:40 /50rem;
			float: left;
			margin-left: 20/ 50rem;
			margin-top: 28/50rem;
		}
		.search{
			float: left;
			position: relative;
			overflow: hidden;
			margin-left: 16.2%;
			input{
				width: 456 /50rem;
				height: 66 /50rem;
				border-radius: 30 /50rem;
				border: none;
				background-color: rgba(255,255,255,0.4);
				outline: none;
				float: left;
				margin-top: 14 /50rem;
				text-indent: 80 /50rem;
				color:#fff;
			 }
		}
    }
    .city{
		height: 88 / 50rem;
		background-color: #fff;
        position:fixed;
        top: 98 / 50rem;
        right: 0;
        left: 0;
		ul{
           display: flex;
           li{
           	flex:1;
            text-align: center;
            margin-top: 27 / 50rem;
            font-size: 34 / 50rem;
           }
		}
		.heng{
			width: 100 / 50rem;
			height: 4 / 50rem;
			background-color: #5dade2;
			margin-top: 13 / 50rem;
			margin-left: 75 / 50rem;
		}
	}
	.wenzi{
        	height: 60 / 50rem;
        	margin-top: 182 / 50rem;
        	p{
              font-size: 28 / 50rem;
              text-align: center;
              line-height: 60 / 50rem;
        	}
        }
	.country{
		height: 910 / 50rem;
		.country_box{
				width: 710 / 50rem;
				margin-left: 20 / 50rem;
				img{
			        width: 340 / 50rem;
			        height: 140 / 50rem;
			        padding:  5 / 50rem;
			}
		
		}

	}
	.ouzhou{
		height: 60 / 50rem;
		p{
            font-size: 28 / 50rem;
            text-align: center;
            line-height: 60 / 50rem;
        }
	}
}
</style>